import {useState, useEffect } from "react";

import {Link, Outlet, useLocation, Navigate} from "react-router-dom";

import React from 'react';
import {LaptopOutlined, UserOutlined, BookOutlined, AppstoreOutlined} from '@ant-design/icons';
import {Breadcrumb, Layout, Menu, theme, Dropdown} from 'antd';

//

import {Space, Typography} from 'antd';

const {Title} = Typography;

const Home = () => {

    return (
        <MainPage/>
    );
}

// 登录后的页面显示

const {Header, Content, Sider, Footer} = Layout;

function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}

const allitems = [
    getItem('歌单管理', 'sub1', <BookOutlined/>, [getItem(<Link to="/home/Playlist">歌单列表</Link>, 'g1'), getItem(
        <Link to="/home/HotPlaylistRanking">热门排名</Link>, 'g11'), getItem(<Link
        to="/home/messageBoard">留言板</Link>, 'g3')]),
    // getItem('借阅管理', 'sub2', <LaptopOutlined/>, [getItem(<Link to="/home/borrowList">借阅列表</Link>, 'g4'), getItem(
    //     <Link to="/home/borrowHistory">借阅历史</Link>, 'g5'), getItem(<Link
    //     to="/home/defaultRecord">图书违约</Link>, 'g6')]),
    getItem('收藏管理', 'sub3', <AppstoreOutlined/>, [getItem(<Link
        to="/home/user-collections">歌单收藏列表</Link>, 'g12'), getItem(<Link
        to="/home/recommend">歌单推荐</Link>, 'g14')]),
    getItem('个人中心', 'sub4', <UserOutlined/>, [getItem(<Link to="/home/self">基本信息</Link>, 'g8'), getItem(<Link
        to="/home/infoCheck">信息审核</Link>, 'g10'), getItem(<Link to="/home/readerManage">用户管理</Link>, 'g15')])
]

const normalitems = [
    getItem('歌单管理', 'sub1', <BookOutlined/>, [getItem(<Link to="/home/Playlist">歌单列表</Link>, 'g1'), getItem(
        <Link to="/home/HotPlaylistRanking">热门排名</Link>, 'g11'), getItem(<Link
        to="/home/messageBoard">留言板</Link>, 'g3')]),
    // getItem('借阅管理', 'sub2', <LaptopOutlined/>, [getItem(<Link to="/home/borrowList">借阅列表</Link>, 'g4'), getItem(
    //     <Link to="/home/borrowHistory">借阅历史</Link>, 'g5'), getItem(<Link
    //     to="/home/defaultRecord">图书违约</Link>, 'g6'), getItem(<Link
    //     to="/home/DeepSeekAssistant">歌单AI助手</Link>, 'g15')]),
    getItem('收藏管理', 'sub3', <AppstoreOutlined/>, [getItem(<Link
        to="/home/user-collections">歌单收藏列表</Link>, 'g12'), getItem(<Link
        to="/home/recommend">歌单推荐</Link>, 'g14')]),
    getItem('个人中心', 'sub4', <UserOutlined/>, [getItem(<Link to="/home/self">基本信息</Link>, 'g8'), getItem(<Link
        to="/home/userProfile">个性推荐</Link>, 'g9')])
]

// 面包屑
const breadcrumbNameMap = {
    '/home': '主页',
    // '/home/bookList': '图书管理 / 图书列表',
    // '/home/hotRanking': '图书管理 / 热门排行',
    '/home/messageBoard': '歌单管理 / 留言板',
    '/home/Playlist': '歌单管理 / 歌单列表',
    '/home/HotPlaylistRanking': '歌单管理 / 热门排名',
    // '/home/borrowList': '借阅管理 / 借阅列表',
    // '/home/borrowHistory': '借阅管理 / 借阅历史',
    // '/home/defaultRecord': '借阅管理 / 图书违约',
    '/home/collectList': '收藏管理 / 收藏列表',
    '/home/user-collections': '收藏管理 / 收藏列表',
    '/home/recommend': '收藏管理 / 歌单推荐',
    '/home/self': '个人中心 / 基本信息',
    '/home/userProfile': '个人中心 / 个性推荐',
    '/home/infoCheck': '个人中心 / 信息审核',
    '/home/readerManage': '个人中心 / 读者管理',
};

// 自定义样式
const customStyles = {
    header: {
        background: '#1890ff',
        padding: '0 24px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
    },
    sider: {
        background: '#fff',
        boxShadow: '2px 0 8px rgba(0, 0, 0, 0.1)'
    },
    menu: {
        height: '100%',
        borderRight: 0,
        paddingTop: '16px'
    },
    content: {
        padding: '24px',
        margin: 0,
        minHeight: '280px',
        background: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)'
    },
    footer: {
        background: '#f0f2f5',
        padding: '16px 24px',
        borderRadius: '8px',
        marginTop: '16px'
    }
};

const MainPage = () => {
    const admin = window.localStorage.getItem('admin')
    const [isAdmin, setAdmin] = useState(admin)

    // 面包屑
    const location = useLocation();
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    // console.log('path:',pathSnippets)
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        // console.log(url)
        return (
            <Breadcrumb.Item key={url}>
                <Link to={url}>{breadcrumbNameMap[url]}</Link>
            </Breadcrumb.Item>
        );
    });
    const breadcrumbItems = [].concat(extraBreadcrumbItems);
    // 面包屑

    const {
        token: {colorBgContainer},
    } = theme.useToken();

    // ================ 新增：AI助手初始化 ================
    useEffect(() => {
        // 确保NLUX脚本加载完成后初始化AI助手
        const initAIChat = () => {
            if (window.AIChat) {
                window.AIChat.init();
            } else {
                // 若脚本未加载，延迟重试（应对网络延迟）
                setTimeout(initAIChat, 500);
            }
        };

        initAIChat();

        // 清理函数（可选：若需卸载时销毁）
        return () => {
            if (window.AIChat) {
                window.AIChat.destroy();
            }
        };
    }, []);
    // ================ 新增结束 ================
    // 制定状态切换主页和其他内容
    let tag = false
    if (pathSnippets.length < 2) {
        tag = true;
    } else {
        tag = false
    }

    return (
        <Layout className="mainpage">
            <Header style={customStyles.header}>
                <Title level={3} style={{color: '#fff', margin: 0}}>音乐平台后台系统</Title>
                <LoginStatus/>
            </Header>
            <Layout>
                <Sider
                    width={200}
                    style={customStyles.sider}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        style={customStyles.menu}
                        items={isAdmin ? allitems : normalitems}
                    />
                </Sider>
                <Layout
                    style={{
                        padding: '0 24px 24px',
                    }}
                >
                    {/* 面包屑 */}
                    <Breadcrumb
                        style={{
                            margin: '16px 0',
                        }}
                    >
                        {breadcrumbItems}
                    </Breadcrumb>
                    {/* ================ 新增：AI助手容器 ================ */}
                    <div className="webchat-container" style={{
                        position: 'fixed',
                        bottom: '10px',
                        right: '10px',
                        zIndex: 100,
                    }}>
                        {/* NLUX会自动在此处渲染悬浮按钮和聊天框 */}
                    </div>
                    <Content
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                            background: colorBgContainer,
                            overflow: 'auto',
                        }}
                    >
                        {tag ? <MainContent/> : <Outlet/>}
                    </Content>
                    <Footer
                        style={{
                            textAlign: 'center',
                        }}
                    >
                        Music management system ©2025 Created by Cz
                    </Footer>
                </Layout>
            </Layout>
        </Layout>
    );
};

// 登录状态框
const LoginStatus = () => {
    const [isLogin, setLogin] = useState(true)

    const handleClick = () => {
        // console.log('delete ok!')
        window.localStorage.removeItem('loggedUser')
        window.localStorage.removeItem('loggedToken')
        if (window.localStorage.getItem('admin')) {
            window.localStorage.removeItem('admin')
        }
        setLogin(false)
    }

    const items = [
        {
            label: <Link to="/home/self">个人中心</Link>,
            key: '0',
        },
        {
            type: 'divider',
        },
        {
            label: <span onClick={handleClick}>退出登录</span>,
            key: '1',
        },
    ];
    return (
        <Space wrap className="loginstatus">
            <Dropdown.Button
                menu={{
                    items,
                }}
                trigger={['click']} icon={<UserOutlined/>}
            >
                {window.localStorage.getItem('loggedUser')}
                {/* 退出登录跳转首页 */}
                {!isLogin && <Navigate to="/" replace={true}/>}
            </Dropdown.Button>
        </Space>
    );
}

// 主页内容提示
const MainContent = () => {
    return (
        <div style={{maxWidth: '800px', margin: '0 auto'}}>
            <Title level={2} style={{color: '#1890ff', textAlign: 'center'}}>欢迎来到音乐平台后台系统！</Title>
            <div style={{
                background: '#f0f9ff',
                padding: '24px',
                borderRadius: '8px',
                marginTop: '24px'
            }}>
                <p style={{fontSize: '16px', lineHeight: '1.8'}}>
                    <strong>🎵 开始探索：</strong> 点击左侧的导航按钮，可以访问不同内容，请尽情尝试！
                </p>
                <p style={{fontSize: '16px', lineHeight: '1.8'}}>
                    <strong>🔒 权限说明：</strong> 信息审核和用户管理为管理员模块，普通用户不可访问。
                </p>
                <p style={{fontSize: '16px', lineHeight: '1.8'}}>
                    <strong>👤 账户管理：</strong> 点击右上角小人图标，可以选择退出登录状态。
                </p>
            </div>
        </div>
    )
}

export default Home;